<template>
	<view>
		<view class="pageTitle">注册</view>
		<view class="loginBlock">
			<u-field v-model="form.mobile" @input="phoneChange" placeholder="请输入账号"
				:error-message="errorMessagePhone"></u-field>
			<u-field v-model="form.code" @input="verifyChange" type="number" placeholder="请输入验证码"
				:error-message="errorMessageVerify">
				<view :class='time == 0?"getVerify green":"getVerify"' slot="right" @click="getVerify">
					{{time == 0?"获取验证码":time+"s"}}
				</view>
			</u-field>
			<u-field v-model="form.password" @input="passwordChange" type="password" placeholder="至少6位密码,包含数字字母"
				:password-icon="true" :error-message="errorMessagePassword">
			</u-field>
			<u-field v-model="form.cPassword" @input="passwordCChange" :password-icon="true" type="password"
				placeholder="再次输入密码" :error-message="errorMessagePasswordC">
			</u-field>

			<u-button type="success" shape="circle" :custom-style="buttonStyle" @click="register"
				:disabled="!isAgree">注册</u-button>
			<view class="otherbox">
				<u-icon class="check"
					:name='isAgree?"https://supply.zhongyimotor.com/upload/applet/icon_select_fill@2x.png":"https://supply.zhongyimotor.com/upload/applet/icon_select@2x.png"'
					size="32" @click="agreement"></u-icon>
				<view class="left">我已仔细阅读并同意<text @click="toAgreements">《用户服务协议》</text>和<text
						@click="toPrivacy">《隐私政策》</text></view>

			</view>

		</view>
		<view class="registerBtn">
			已有账号,<text @click="toLogin">返回登录</text>
		</view>
		<u-toast ref="uToast" />
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import {
		buttonStyleGreen
	} from "@/static/style.js";
	import {
		buttonStyle
	} from "@/utils/buttonStyle.js";
	export default {
		data() {
			return {
				form: {
					mobile: "",
					password: "",
					cPassword: "",
					code: "",
				},
				errorMessagePhone: "",
				errorMessagePassword: "",
				errorMessageVerify: "",
				errorMessagePasswordC: "",
				time: 0,
				timer: "",
				canVerify: true,
				isAgree: false,
				buttonStyle,
			}
		},
		onShow() {

		},
		methods: {
			agreement() {
				this.isAgree ? this.isAgree = false : this.isAgree = true
			},
			toAgreements() {
				uni.navigateTo({
					url: `/pages/agreements/index`
				})
			},
			toPrivacy() {
				uni.navigateTo({
					url: `/pages/privacyPolicy/index`
				})
			},
			cutDown() {
				this.time--
				if (this.time == 0) {
					this.canVerify = true
					clearInterval(this.timer)
				}
			},
			getVerify() {
				let that = this
				if (!that.canVerify) {
					return false
				}
				if (that.mobile == "") {
					that.errorMessagePhone = "请输入您的手机号";
					return;
				}
				let params = {
					mobile: that.form.mobile,
					lang: ""
				}
				that.$api.getVerify(params).then((res) => {
					that.time = 90
					that.canVerify = false
					that.timer = setInterval(that.cutDown, 1000)
					uni.showToast({
						title: '验证码已发送',
						icon: "none"
					})
				})
			},
			verifyChange(e) {
				if (e != "") {
					this.errorMessageVerify = ""
				}
			},
			phoneChange(e) {
				if (e != "") {
					this.errorMessagePhone = ""
				}
			},
			passwordCChange(e) {
				if (e != "") {
					this.errorMessagePasswordC = ""
				}
			},
			passwordChange(e) {
				if (e != "") {
					this.errorMessagePassword = ""
				}
			},
			toLogin() {
				uni.navigateTo({
					url: `/pages/login/index`
				})
			},
			register() {
				let that = this
				if (!that.isAgree) {
					uni.showToast({
						title: '请阅读服务&隐私协议，并勾选',
						icon: "none"
					})
					return
				}
				if (that.form.mobild == "") {
					that.errorMessagePhone = "请输入您的手机号";
					return;
				}
				if (that.form.password == "") {
					that.errorMessagePassword = "请输入您的密码";
					return;
				}
				if (that.form.password != that.form.cPassword) {
					that.errorMessagePasswordC = "密码不一致";
					return;
				}
				if (that.form.code == "") {
					that.errorMessageVerify = "请输入短信验证码";
					return;
				}
				let params = that.form
				that.$api.register(params).then((res) => {
					uni.showToast({
						title: '注册成功',
						icon: "success",
						duration: 2000,
						success: () => {
							setTimeout(function() {
								let userKey = {
									appId: res.result.user.id,
									authorization: res.result.jwt,
								}
								uni.setStorage({
									key: 'userKey',
									data: userKey,
									success: function() {
										uni.switchTab({
											url: `/pages/mine/index`
										})
									}
								});
							}, 2000)
						}
					})

				})
			}
		}
	};
</script>

<style scoped lang="less">
	.loginBlock {
		.otherbox {
			text {
				color: #0FBD7F;
			}

			display: flex;

			/deep/u-icon {
				margin-top: -30rpx;
				margin-right: 20rpx;
			}
		}
	}
</style>